<template>
    <div>
        <h1>reactive() 的局限性</h1>
        <div>
            <h3><button type="button" @click="changeUser">改变user的值,看看是否会丢失响应式</button></h3>
            <ul>
                <li>user: {{ user.name }}-{{ user.sex }}-{{ user.age }}</li>
                <li>-----</li>
                <li v-for="item in user.love" :key="item">{{ item }}</li>
            </ul>

            <hr>
            <h3><button type="button" @click="changeUserJie"> 改变user结构后的值,看看是否会丢失响应式</button></h3>
            <ul>
                <li>name: {{ name }}</li>
                <li>age: {{ age }}</li>
                <li>sex: {{ sex }}</li>
                <li>love: {{ love }}</li>
                <li>-------love--------</li>
                <li v-for="item in love" :key="item">{{ item }}</li>

                <li>-------deeplove--------</li>
                <li v-for="item in deeplove" :key="item">{{ item }}</li>

                <li>-------reactDeepLove--------</li>
                <li v-for="item in reactDeepLove" :key="item">{{ item }}</li>

            </ul>

        </div>
    </div>
</template>

<script setup lang='ts'>
import { reactive } from 'vue';


// 1.有限的值类型：它只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)。它不能持有如 string、number 或 boolean 这样的原始类型。
// let state1 = reactive(3) // 报错

// 2.不能替换整个对象：由于 Vue 的响应式跟踪是通过属性访问实现的，因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象，因为这样的话与第一个引用的响应性连接将丢失：
// 参考 Study3StuDemo1的案例

// 3.对解构操作不友好：
// 3-1 当我们将响应式对象的`原始类型`属性解构为本地变量时，将丢失响应性连接,而引用类型保留响应式


let user = reactive({
    name: '张国荣',
    sex: 'man',
    age: 18,
    love: ['唱', '跳', 'rap', '篮球']
})

// 构建完之后变成未包装的变量
let { name, sex, age, love } = user

// 深拷贝 love
let deeplove = JSON.parse(JSON.stringify(love))

let reactDeepLove = reactive(JSON.parse(JSON.stringify(love)))


console.log(name, sex, age);
console.log(love);
console.log(deeplove);

const changeUser = () => {
    user.age = 88
    user.love.push('你干嘛')
}

const changeUserJie = () => {
    //原始类型  丢失响应性
    name = '周杰伦'

    // 引用类型 不会丢失响应性，但是引用的还是原来的地址，会干扰解构之前的对象属性
    love.push('music~!')

    // 深拷贝 并且重新包装的对象 不会丢失响应性，不会干扰解构之前的对象属性
    reactDeepLove.push('deepCopy 爱好')
    console.log(reactDeepLove);

}






</script>

<style></style>